<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .transition-custom {
                @apply transition-all duration-500 ease-in-out;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center p-4">
    <!-- 主容器 -->
    <div class="w-full max-w-5xl relative">
        <!-- 背景装饰 -->
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-32 -left-20 w-80 h-80 bg-accent/10 rounded-full blur-3xl"></div>
        
        <!-- 卡片容器 -->
        <div class="relative bg-white rounded-2xl overflow-hidden card-shadow">
            <div class="flex flex-col md:flex-row">
                <!-- 左侧图片区域 -->
                <div class="md:w-1/2 bg-gradient-custom p-8 md:p-12 text-white flex flex-col justify-between">
                    <div>
                        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-shadow">欢迎回来</h1>
                        <p class="text-white/90 mb-8 max-w-md">
                            登录您的账户，开启全新的学习与教学体验。我们致力于提供最好的教育资源和平台服务。
                        </p>
                    </div>
                    
                    <!-- 装饰图形 -->
                    <div class="relative mt-12">
                        <div class="absolute -top-6 -left-6 w-24 h-24 border-4 border-white/20 rounded-lg transform rotate-12"></div>
                        <div class="absolute top-12 -right-8 w-32 h-32 border-4 border-white/20 rounded-full"></div>
                        <div class="absolute -bottom-4 left-1/3 w-16 h-16 border-4 border-white/20 rounded-lg transform -rotate-12"></div>
                    </div>
                </div>
                
                <!-- 右侧表单区域 -->
                <div class="md:w-1/2 p-8 md:p-12">
                    <!-- 表单标题 -->
                    <div class="mb-8 text-center">
                        <h2 id="form-title" class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2 transition-custom">登录账户</h2>
                        <p id="form-subtitle" class="text-gray-500 transition-custom">请输入您的账号信息</p>
                    </div>
                    
                    <!-- 登录表单 -->
                    <form id="login-form" class="space-y-5 transition-custom">
                        <div>
                            <label for="login-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" id="login-phone" placeholder="请输入手机号" 
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                            </div>
                        </div>
                        
                        <div>
                            <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="login-password" placeholder="请输入密码" 
                                    class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                                <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom" id="toggle-login-password">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <input type="checkbox" id="remember-me" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                            </div>
                            <button type="button" id="go-to-forgot" class="text-sm text-primary hover:text-primary/80 transition-custom">
                                忘记密码?
                            </button>
                        </div>
                        
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98]">
                            登录
                        </button>
                    </form>
                    
                    <!-- 注册表单 (默认隐藏) -->
                    <form id="register-form" class="space-y-5 transition-custom hidden">
                        <div>
                            <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" id="register-phone" placeholder="请输入手机号" 
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                            </div>
                        </div>
                        
                        <div>
                            <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-envelope"></i>
                                </span>
                                <input type="email" id="register-email" placeholder="请输入邮箱" 
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                            </div>
                        </div>
                        
                        <div>
                            <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="register-password" placeholder="请设置密码" 
                                    class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                                <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom" id="toggle-register-password">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">用户类型</label>
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="user-type" value="teacher" class="w-4 h-4 text-primary focus:ring-primary border-gray-300" checked>
                                    <span class="ml-2 text-gray-700">教师</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="user-type" value="student" class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">学生</span>
                                </label>
                            </div>
                        </div>
                        
                        <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98]">
                            注册
                        </button>
                    </form>
                    
                    <!-- 找回密码表单 (默认隐藏) -->
                    <form id="forgot-form" class="space-y-5 transition-custom hidden">
                        <div>
                            <label for="forgot-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" id="forgot-phone" placeholder="请输入注册的手机号" 
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                            </div>
                        </div>
                        
                        <div>
                            <label for="forgot-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-envelope"></i>
                                </span>
                                <input type="email" id="forgot-email" placeholder="请输入注册的邮箱" 
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
                                    required>
                            </div>
                        </div>
                        
                        <button type="submit" class="w-full bg-accent hover:bg-accent/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98]">
                            获取验证码
                        </button>
                    </form>
                    
                    <!-- 切换链接 -->
                    <div class="mt-8 text-center">
                        <p id="toggle-text" class="text-gray-600">
                            还没有账号? 
                            <button type="button" id="go-to-register" class="text-primary font-medium hover:text-primary/80 transition-custom">
                                立即注册
                            </button>
                        </p>
                        <p id="back-to-login-text" class="text-gray-600 hidden">
                            已有账号? 
                            <button type="button" id="back-to-login" class="text-primary font-medium hover:text-primary/80 transition-custom">
                                返回登录
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="mt-8 text-center text-gray-500 text-sm">
            <p>© 2023 教育平台. 保留所有权利.</p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const forgotForm = document.getElementById('forgot-form');
        const formTitle = document.getElementById('form-title');
        const formSubtitle = document.getElementById('form-subtitle');
        const toggleText = document.getElementById('toggle-text');
        const backToLoginText = document.getElementById('back-to-login-text');
        
        // 切换按钮
        const goToRegisterBtn = document.getElementById('go-to-register');
        const goToForgotBtn = document.getElementById('go-to-forgot');
        const backToLoginBtn = document.getElementById('back-to-login');
        
        // 密码显示切换按钮
        const toggleLoginPassword = document.getElementById('toggle-login-password');
        const toggleRegisterPassword = document.getElementById('toggle-register-password');
        const loginPassword = document.getElementById('login-password');
        const registerPassword = document.getElementById('register-password');
        
        // 切换到注册表单
        goToRegisterBtn.addEventListener('click', () => {
            // 添加淡出效果
            loginForm.classList.add('opacity-0', 'translate-x-4');
            forgotForm.classList.add('opacity-0', 'translate-x-4');
            
            setTimeout(() => {
                // 隐藏登录和找回密码表单
                loginForm.classList.add('hidden');
                forgotForm.classList.add('hidden');
                
                // 显示注册表单
                registerForm.classList.remove('hidden');
                
                // 更新标题和说明
                formTitle.textContent = '创建账户';
                formSubtitle.textContent = '请填写信息完成注册';
                
                // 更新切换文本
                toggleText.classList.add('hidden');
                backToLoginText.classList.remove('hidden');
                
                // 添加淡入效果
                setTimeout(() => {
                    registerForm.classList.remove('opacity-0', 'translate-x-4');
                }, 50);
            }, 300);
        });
        
        // 切换到找回密码表单
        goToForgotBtn.addEventListener('click', () => {
            // 添加淡出效果
            loginForm.classList.add('opacity-0', 'translate-x-4');
            registerForm.classList.add('opacity-0', 'translate-x-4');
            
            setTimeout(() => {
                // 隐藏登录和注册表单
                loginForm.classList.add('hidden');
                registerForm.classList.add('hidden');
                
                // 显示找回密码表单
                forgotForm.classList.remove('hidden');
                
                // 更新标题和说明
                formTitle.textContent = '找回密码';
                formSubtitle.textContent = '请输入注册的手机号和邮箱';
                
                // 更新切换文本
                toggleText.classList.add('hidden');
                backToLoginText.classList.remove('hidden');
                
                // 添加淡入效果
                setTimeout(() => {
                    forgotForm.classList.remove('opacity-0', 'translate-x-4');
                }, 50);
            }, 300);
        });
        
        // 返回登录表单
        backToLoginBtn.addEventListener('click', () => {
            // 添加淡出效果
            registerForm.classList.add('opacity-0', 'translate-x-4');
            forgotForm.classList.add('opacity-0', 'translate-x-4');
            
            setTimeout(() => {
                // 隐藏注册和找回密码表单
                registerForm.classList.add('hidden');
                forgotForm.classList.add('hidden');
                
                // 显示登录表单
                loginForm.classList.remove('hidden');
                
                // 更新标题和说明
                formTitle.textContent = '登录账户';
                formSubtitle.textContent = '请输入您的账号信息';
                
                // 更新切换文本
                backToLoginText.classList.add('hidden');
                toggleText.classList.remove('hidden');
                
                // 添加淡入效果
                setTimeout(() => {
                    loginForm.classList.remove('opacity-0', 'translate-x-4');
                }, 50);
            }, 300);
        });
        
        // 切换登录密码显示状态
        toggleLoginPassword.addEventListener('click', () => {
            const type = loginPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            loginPassword.setAttribute('type', type);
            
            // 切换图标
            toggleLoginPassword.querySelector('i').classList.toggle('fa-eye');
            toggleLoginPassword.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 切换注册密码显示状态
        toggleRegisterPassword.addEventListener('click', () => {
            const type = registerPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            registerPassword.setAttribute('type', type);
            
            // 切换图标
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye');
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 表单提交处理
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // 模拟登录操作
            alert('登录功能已触发，实际应用中会处理登录逻辑');
        });
        
        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // 模拟注册操作
            alert('注册功能已触发，实际应用中会处理注册逻辑');
        });
        
        forgotForm.addEventListener('submit', (e) => {
            e.preventDefault();
            // 模拟找回密码操作
            alert('找回密码功能已触发，实际应用中会发送验证码');
        });
    </script>
</body>
</html>
